<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能倒计时提醒</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .timer-shadow {
                text-shadow: 0 4px 20px rgba(22, 93, 255, 0.2);
            }
            .glass-effect {
                backdrop-filter: blur(10px);
                background-color: rgba(255, 255, 255, 0.8);
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.5s ease-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes slideUp {
                from { transform: translateY(20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-neutral-100 to-neutral-200 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-regular fa-clock text-primary text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold text-neutral-700">倒计时提醒</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
                    <i class="fa-regular fa-moon text-neutral-500"></i>
                </button>
                <button id="help-button" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
                    <i class="fa-regular fa-question-circle text-neutral-500"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="max-w-3xl mx-auto">
            <!-- 功能卡片 -->
            <div class="bg-white rounded-2xl shadow-card hover:shadow-card-hover transition-all duration-300 p-6 md:p-8 mb-8 animate-fade-in">
                <h2 class="text-2xl md:text-3xl font-bold text-neutral-700 mb-6 flex items-center">
                    <i class="fa-regular fa-bell text-primary mr-2"></i>
                    设置提醒
                </h2>
                
                <!-- 倒计时显示 -->
                <div id="timer-display" class="mb-8 bg-gradient-to-r from-primary/5 to-primary/10 rounded-xl p-6 flex flex-col items-center">
                    <div class="text-4xl md:text-6xl font-bold text-primary timer-shadow mb-2">00:00:00</div>
                    <p id="timer-message" class="text-neutral-500 text-lg">设置倒计时开始计时</p>
                </div>
                
                <!-- 时间设置 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    <div class="relative">
                        <label for="hours" class="block text-sm font-medium text-neutral-500 mb-1">小时</label>
                        <input type="number" id="hours" min="0" max="23" value="0" 
                            class="w-full px-4 py-3 rounded-lg border border-neutral-200 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
                        <div class="absolute right-3 top-8 text-neutral-400">小时</div>
                    </div>
                    <div class="relative">
                        <label for="minutes" class="block text-sm font-medium text-neutral-500 mb-1">分钟</label>
                        <input type="number" id="minutes" min="0" max="59" value="1" 
                            class="w-full px-4 py-3 rounded-lg border border-neutral-200 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
                        <div class="absolute right-3 top-8 text-neutral-400">分钟</div>
                    </div>
                    <div class="relative">
                        <label for="seconds" class="block text-sm font-medium text-neutral-500 mb-1">秒钟</label>
                        <input type="number" id="seconds" min="0" max="59" value="0" 
                            class="w-full px-4 py-3 rounded-lg border border-neutral-200 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
                        <div class="absolute right-3 top-8 text-neutral-400">秒钟</div>
                    </div>
                </div>
                
                <!-- 提醒内容设置 -->
                <div class="mb-6">
                    <label for="reminder-message" class="block text-sm font-medium text-neutral-500 mb-1">提醒内容</label>
                    <input type="text" id="reminder-message" placeholder="输入提醒内容..." 
                        value="时间到了！" class="w-full px-4 py-3 rounded-lg border border-neutral-200 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
                </div>
                
                <!-- 声音设置 -->
                <div class="flex flex-wrap items-center justify-between mb-8">
                    <div class="flex items-center space-x-2">
                        <i class="fa-regular fa-volume-high text-neutral-500"></i>
                        <span class="text-neutral-700">提醒声音</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center">
                            <input type="radio" id="sound1" name="reminder-sound" value="default" checked 
                                class="w-4 h-4 text-primary focus:ring-primary">
                            <label for="sound1" class="ml-2 text-neutral-600">默认</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" id="sound2" name="reminder-sound" value="alarm" 
                                class="w-4 h-4 text-primary focus:ring-primary">
                            <label for="sound2" class="ml-2 text-neutral-600">闹钟</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" id="sound3" name="reminder-sound" value="chime" 
                                class="w-4 h-4 text-primary focus:ring-primary">
                            <label for="sound3" class="ml-2 text-neutral-600">铃声</label>
                        </div>
                    </div>
                </div>
                
                <!-- 按钮组 -->
                <div class="flex flex-wrap gap-4">
                    <button id="start-button" class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center">
                        <i class="fa-regular fa-play-circle mr-2"></i> 开始计时
                    </button>
                    <button id="pause-button" class="flex-1 bg-neutral-200 hover:bg-neutral-300 text-neutral-700 font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center" disabled>
                        <i class="fa-regular fa-pause-circle mr-2"></i> 暂停
                    </button>
                    <button id="reset-button" class="flex-1 bg-neutral-200 hover:bg-neutral-300 text-neutral-700 font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center" disabled>
                        <i class="fa-regular fa-refresh mr-2"></i> 重置
                    </button>
                </div>
            </div>
            
            <!-- 历史记录 -->
            <div class="bg-white rounded-2xl shadow-card hover:shadow-card-hover transition-all duration-300 p-6 md:p-8 animate-fade-in" style="animation-delay: 0.2s">
                <h2 class="text-xl md:text-2xl font-bold text-neutral-700 mb-6 flex items-center">
                    <i class="fa-regular fa-history text-primary mr-2"></i>
                    最近提醒
                </h2>
                <div id="history-list" class="space-y-3">
                    <div class="text-center text-neutral-400 py-4">暂无历史记录</div>
                </div>
            </div>
        </div>
    </main>

    <!-- 通知权限提示 -->
    <div id="notification-permission" class="fixed bottom-6 right-6 bg-white rounded-xl shadow-lg p-4 max-w-md glass-effect animate-slide-up z-40 hidden">
        <div class="flex items-start">
            <div class="flex-shrink-0 pt-0.5">
                <i class="fa-regular fa-bell text-primary text-xl"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-base font-medium text-neutral-700">启用系统通知</h3>
                <div class="mt-1 text-sm text-neutral-500">
                    <p>为了在倒计时结束时提醒您，需要获取通知权限。</p>
                </div>
                <div class="mt-3 flex space-x-3">
                    <button id="allow-notification" class="px-3 py-1.5 bg-primary text-white text-sm rounded-lg hover:bg-primary/90 transition-colors">
                        允许通知
                    </button>
                    <button id="deny-notification" class="px-3 py-1.5 bg-neutral-100 text-neutral-700 text-sm rounded-lg hover:bg-neutral-200 transition-colors">
                        稍后再说
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-neutral-200 py-6">
        <div class="container mx-auto px-4 text-center text-neutral-500 text-sm">
            <p>© 2025 倒计时提醒 | 让时间管理更简单</p>
            <div class="mt-2 flex justify-center space-x-4">
                <a href="#" class="hover:text-primary transition-colors"><i class="fa-regular fa-question-circle"></i> 帮助</a>
                <a href="#" class="hover:text-primary transition-colors"><i class="fa-regular fa-file-text"></i> 隐私政策</a>
                <a href="#" class="hover:text-primary transition-colors"><i class="fa-regular fa-envelope"></i> 联系我们</a>
            </div>
        </div>
    </footer>

    <script>
        // 倒计时相关变量
        let countdown;
        let totalSeconds = 0;
        let remainingSeconds = 0;
        let isRunning = false;
        let remindersHistory = [];
        
        // DOM 元素
        const hoursInput = document.getElementById('hours');
        const minutesInput = document.getElementById('minutes');
        const secondsInput = document.getElementById('seconds');
        const reminderMessageInput = document.getElementById('reminder-message');
        const timerDisplay = document.querySelector('#timer-display > div');
        const timerMessage = document.getElementById('timer-message');
        const startButton = document.getElementById('start-button');
        const pauseButton = document.getElementById('pause-button');
        const resetButton = document.getElementById('reset-button');
        const historyList = document.getElementById('history-list');
        const notificationPermissionBox = document.getElementById('notification-permission');
        const allowNotificationButton = document.getElementById('allow-notification');
        const denyNotificationButton = document.getElementById('deny-notification');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 加载历史记录
            loadHistory();
            
            // 检查通知权限
            checkNotificationPermission();
            
            // 添加事件监听器
            startButton.addEventListener('click', startCountdown);
            pauseButton.addEventListener('click', pauseCountdown);
            resetButton.addEventListener('click', resetCountdown);
            allowNotificationButton.addEventListener('click', requestNotificationPermission);
            denyNotificationButton.addEventListener('click', hideNotificationPermissionBox);
            
            // 表单输入验证
            [hoursInput, minutesInput, secondsInput].forEach(input => {
                input.addEventListener('input', () => {
                    input.value = Math.max(0, Math.min(parseInt(input.value) || 0, parseInt(input.max)));
                });
            });
        });
        
        // 检查通知权限
        function checkNotificationPermission() {
            if (Notification.permission === 'granted') {
                // 已授权
            } else if (Notification.permission !== 'denied') {
                // 未拒绝，显示请求框
                setTimeout(() => {
                    notificationPermissionBox.classList.remove('hidden');
                }, 2000);
            }
        }
        
        // 请求通知权限
        function requestNotificationPermission() {
            Notification.requestPermission().then(permission => {
                if (permission === 'granted') {
                    showToast('通知权限已获取');
                } else {
                    showToast('通知权限被拒绝', 'warning');
                }
                notificationPermissionBox.classList.add('hidden');
            });
        }
        
        // 隐藏通知权限提示框
        function hideNotificationPermissionBox() {
            notificationPermissionBox.classList.add('hidden');
        }
        
        // 显示系统通知
        function showSystemNotification(message) {
            if (Notification.permission === 'granted') {
                new Notification('倒计时提醒', {
                    body: message,
                    icon: 'https://picsum.photos/64/64'
                });
            } else if (Notification.permission !== 'denied') {
                requestNotificationPermission();
            }
        }
        
        // 显示提示消息
        function showToast(message, type = 'success') {
            // 创建toast元素
            const toast = document.createElement('div');
            toast.className = `fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 animate-fade-in flex items-center ${
                type === 'success' ? 'bg-success text-white' : 
                type === 'warning' ? 'bg-warning text-white' : 
                'bg-danger text-white'
            }`;
            
            // 设置图标和文本
            const iconClass = type === 'success' ? 'fa-regular fa-check-circle' : 
                             type === 'warning' ? 'fa-regular fa-exclamation-triangle' : 
                             'fa-regular fa-times-circle';
            
            toast.innerHTML = `
                <i class="fa-regular ${iconClass} mr-2"></i>
                <span>${message}</span>
            `;
            
            // 添加到文档
            document.body.appendChild(toast);
            
            // 3秒后移除
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transform = 'translateY(-10px)';
                toast.style.transition = 'opacity 0.3s, transform 0.3s';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
        }
        
        // 格式化时间显示
        function formatTime(seconds) {
            const h = Math.floor(seconds / 3600);
            const m = Math.floor((seconds % 3600) / 60);
            const s = seconds % 60;
            return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
        }
        
        // 开始倒计时
        function startCountdown() {
            // 获取输入的时间
            const hours = parseInt(hoursInput.value) || 0;
            const minutes = parseInt(minutesInput.value) || 0;
            const seconds = parseInt(secondsInput.value) || 0;
            
            // 验证输入
            totalSeconds = hours * 3600 + minutes * 60 + seconds;
            if (totalSeconds <= 0) {
                showToast('请设置有效的倒计时时间', 'warning');
                return;
            }
            
            // 如果是重新开始，重置剩余时间
            if (!isRunning) {
                remainingSeconds = totalSeconds;
            }
            
            // 更新UI状态
            isRunning = true;
            startButton.disabled = true;
            startButton.classList.add('bg-neutral-300', 'hover:bg-neutral-300');
            startButton.classList.remove('bg-primary', 'hover:bg-primary/90');
            pauseButton.disabled = false;
            pauseButton.classList.remove('bg-neutral-200', 'hover:bg-neutral-200');
            pauseButton.classList.add('bg-secondary', 'hover:bg-secondary/90', 'text-white');
            resetButton.disabled = false;
            resetButton.classList.remove('bg-neutral-200', 'hover:bg-neutral-200');
            resetButton.classList.add('bg-neutral-400', 'hover:bg-neutral-500', 'text-white');
            
            // 开始倒计时
            countdown = setInterval(() => {
                remainingSeconds--;
                timerDisplay.textContent = formatTime(remainingSeconds);
                
                // 当倒计时结束
                if (remainingSeconds <= 0) {
                    clearInterval(countdown);
                    finishCountdown();
                }
            }, 1000);
        }
        
        // 暂停倒计时
        function pauseCountdown() {
            if (!isRunning) return;
            
            clearInterval(countdown);
            isRunning = false;
            
            // 更新UI状态
            startButton.disabled = false;
            startButton.classList.remove('bg-neutral-300', 'hover:bg-neutral-300');
            startButton.classList.add('bg-primary', 'hover:bg-primary/90');
            pauseButton.disabled = true;
            pauseButton.classList.add('bg-neutral-200', 'hover:bg-neutral-200');
            pauseButton.classList.remove('bg-secondary', 'hover:bg-secondary/90', 'text-white');
        }
        
        // 重置倒计时
        function resetCountdown() {
            clearInterval(countdown);
            isRunning = false;
            remainingSeconds = totalSeconds;
            
            // 更新UI
            timerDisplay.textContent = formatTime(remainingSeconds);
            timerMessage.textContent = '设置倒计时开始计时';
            
            // 重置按钮状态
            startButton.disabled = false;
            startButton.classList.remove('bg-neutral-300', 'hover:bg-neutral-300');
            startButton.classList.add('bg-primary', 'hover:bg-primary/90');
            pauseButton.disabled = true;
            pauseButton.classList.add('bg-neutral-200', 'hover:bg-neutral-200');
            pauseButton.classList.remove('bg-secondary', 'hover:bg-secondary/90', 'text-white');
            resetButton.disabled = true;
            resetButton.classList.add('bg-neutral-200', 'hover:bg-neutral-200');
            resetButton.classList.remove('bg-neutral-400', 'hover:bg-neutral-500', 'text-white');
        }
        
        // 倒计时结束处理
        function finishCountdown() {
            // 更新UI
            timerDisplay.textContent = '00:00:00';
            timerMessage.textContent = '时间到！';
            
            // 添加动画效果
            timerDisplay.classList.add('text-danger', 'animate-pulse-slow');
            
            // 显示系统通知
            const message = reminderMessageInput.value || '时间到了！';
            showSystemNotification(message);
            
            // 播放提醒声音
            playNotificationSound();
            
            // 记录历史
            addToHistory(message, totalSeconds);
            
            // 重置按钮状态
            startButton.disabled = false;
            startButton.classList.remove('bg-neutral-300', 'hover:bg-neutral-300');
            startButton.classList.add('bg-primary', 'hover:bg-primary/90');
            pauseButton.disabled = true;
            pauseButton.classList.add('bg-neutral-200', 'hover:bg-neutral-200');
            pauseButton.classList.remove('bg-secondary', 'hover:bg-secondary/90', 'text-white');
            resetButton.disabled = true;
            resetButton.classList.add('bg-neutral-200', 'hover:bg-neutral-200');
            resetButton.classList.remove('bg-neutral-400', 'hover:bg-neutral-500', 'text-white');
            
            // 5秒后移除动画效果
            setTimeout(() => {
                timerDisplay.classList.remove('text-danger', 'animate-pulse-slow');
            }, 5000);
        }
        
        // 播放通知声音
        function playNotificationSound() {
            const selectedSound = document.querySelector('input[name="reminder-sound"]:checked').value;
            let soundUrl;
            
            switch(selectedSound) {
                case 'alarm':
                    soundUrl = 'https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3';
                    break;
                case 'chime':
                    soundUrl = 'https://assets.mixkit.co/sfx/preview/mixkit-correct-answer-tone-2870.mp3';
                    break;
                default: // default
                    soundUrl = 'https://assets.mixkit.co/sfx/preview/mixkit-software-interface-start-2578.mp3';
            }
            
            const audio = new Audio(soundUrl);
            audio.play().catch(e => console.log('无法播放声音:', e));
        }
        
        // 添加到历史记录
        function addToHistory(message, seconds) {
            const now = new Date();
            const historyItem = {
                id: Date.now(),
                message,
                duration: seconds,
                date: now
            };
            
            // 添加到数组开头
            remindersHistory.unshift(historyItem);
            
            // 最多保存10条记录
            if (remindersHistory.length > 10) {
                remindersHistory.pop();
            }
            
            // 保存到本地存储
            localStorage.setItem('countdownReminders', JSON.stringify(remindersHistory));
            
            // 更新UI
            updateHistoryUI();
        }
        
        // 加载历史记录
        function loadHistory() {
            const savedHistory = localStorage.getItem('countdownReminders');
            if (savedHistory) {
                remindersHistory = JSON.parse(savedHistory);
                updateHistoryUI();
            }
        }
        
        // 更新历史记录UI
        function updateHistoryUI() {
            if (remindersHistory.length === 0) {
                historyList.innerHTML = '<div class="text-center text-neutral-400 py-4">暂无历史记录</div>';
                return;
            }
            
            historyList.innerHTML = '';
            
            remindersHistory.forEach(item => {
                const durationStr = formatDuration(item.duration);
                const dateStr = formatDate(item.date);
                
                const historyItem = document.createElement('div');
                historyItem.className = 'bg-neutral-50 rounded-lg p-4 flex items-center justify-between hover:bg-neutral-100 transition-colors';
                historyItem.innerHTML = `
                    <div class="flex items-start">
                        <div class="flex-shrink-0 pt-0.5">
                            <i class="fa-regular fa-bell text-primary"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-neutral-700">${item.message}</p>
                            <p class="text-sm text-neutral-400">${durationStr} · ${dateStr}</p>
                        </div>
                    </div>
                    <button class="text-neutral-400 hover:text-danger transition-colors delete-history" data-id="${item.id}">
                        <i class="fa-regular fa-trash-can"></i>
                    </button>
                `;
                
                historyList.appendChild(historyItem);
            });
            
            // 添加删除事件监听器
            document.querySelectorAll('.delete-history').forEach(button => {
                button.addEventListener('click', (e) => {
                    const id = parseInt(e.currentTarget.dataset.id);
                    deleteHistoryItem(id);
                });
            });
        }
        
        // 格式化持续时间
        function formatDuration(seconds) {
            if (seconds < 60) {
                return `${seconds}秒`;
            } else if (seconds < 3600) {
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = seconds % 60;
                return remainingSeconds > 0 
                    ? `${minutes}分${remainingSeconds}秒` 
                    : `${minutes}分钟`;
            } else {
                const hours = Math.floor(seconds / 3600);
                const minutes = Math.floor((seconds % 3600) / 60);
                return minutes > 0 
                    ? `${hours}小时${minutes}分钟` 
                    : `${hours}小时`;
            }
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            const now = new Date();
            
            // 如果是今天
            if (date.toDateString() === now.toDateString()) {
                return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            }
            
            // 如果是昨天
            const yesterday = new Date();
            yesterday.setDate(now.getDate() - 1);
            if (date.toDateString() === yesterday.toDateString()) {
                return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            }
            
            // 其他情况
            return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
        }
        
        // 删除历史记录项
        function deleteHistoryItem(id) {
            remindersHistory = remindersHistory.filter(item => item.id !== id);
            localStorage.setItem('countdownReminders', JSON.stringify(remindersHistory));
            updateHistoryUI();
        }
    </script>
</body>
</html>
    